<template>
  <div class="app-container type-area">
    <div class="magazinedesc">
      <div class="left">
        <div class="name">《中小学心理健康教育》杂志</div>
        <div class="desc">
          <div class="fL">主管单位：陕西出版传媒集团</div>
          <div class="fL">主办单位：陕西出版传媒集团</div>
          <div class="fL">出版单位：陕西出版传媒集团</div>
          <div class="fL">出版周期：旬刊</div>
          <div class="fL">出刊时间：每月1日、11日、21日出版</div>
          <div class="fL">中国标准号:ISSN1671-2684CN11-4699/G4</div>
          <div class="fL">地址:郑州市金水区鑫苑路26号阳光大厦21层</div>
          <div class="fL">邮编: 450000</div>
          <div class="fL"> 定价: 10元/册</div>
          <div class="fL"> 全年定价: 360元</div>
        </div>
      </div>
      <div class="right">
        <div class="contact">
          <div class="title">咨询电话:</div>
          <p>王经理：15037112979</p>
          <p>刘经理：17638533147</p>
          <p>热线: 0371-61657710</p>
        </div>
        <div class="weixin">
          <p class="title">客服微信</p>
          <img :src="kefu">
        </div>
      </div>
    </div>
    <div class="order">

      <el-form ref="form" :model="formData" :rules="rules" size="medium" label-width="80px" label-position="left">
        <div class="foundation">
          <h2>选择您要订阅的期刊</h2>
        </div>
        <div class="magazine">
          <el-table :data="magazineList" @current-change="handleCurrentChange" highlight-current-row :stripe="true">
            <el-table-column label="订期" align="center" label-width="150px">
              <template slot-scope="scope">
                <el-radio :label="scope.row.id" v-model="formData.magazineId">{{ scope.row.magazineName }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="封面" align="center" prop="magazineCover">
              <template slot-scope="scope">
                <image-preview :src="scope.row.magazineCover" :height="120"/>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center" prop="price"/>
          </el-table>

        </div>
        <div class="num">
          <el-form-item label="数量">
            <el-input-number v-model="formData.num" :min="1" :max="100" label="请输入数量"
                             size="small"></el-input-number>
          </el-form-item>
          <el-form-item label="总价">
            <div class="totalprice">{{ totalPrice }} 元</div>
          </el-form-item>
        </div>
        <div class="foundation">
          <h2>基本信息</h2>
        </div>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="姓名" prop="custumerName">
              <el-input v-model="formData.custumerName" placeholder="请输入姓名" :maxlength="6" clearable
                        prefix-icon='el-icon-user'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                        prefix-icon='el-icon-mobile'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="固定电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入固定电话" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable
                        prefix-icon='el-icon-document-remove' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位" prop="company">
              <el-input v-model="formData.company" placeholder="请输入单位或学校全称" clearable
                        :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="foundation">
          <h2>邮寄地址</h2>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="选择城市" prop="city">
              <el-select v-model="formData.city" placeholder="选择城市(仅限河南省内)" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in cityList" :key="index" :label="item.CITY"
                           :value="item.CITY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收获地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入收获地址" clearable
                        prefix-icon='el-icon-add-location'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人" prop="receiver">
              <el-input v-model="formData.receiver" placeholder="请输入收件人姓名" clearable
                        prefix-icon='el-icon-user'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编" prop="postcode" label-width="50px" style="margin-left: 30px" >
              <el-input v-model="formData.postcode" placeholder="请输入邮编" clearable
                        prefix-icon='el-icon-postcard'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="info">
          <p>* 如果学校通过邮局征订，请勾选下面选项</p>
          <p>* 邮局征订不必在本系统扫码付款，仅需提交订阅信息即可。</p>
        </div>
        <el-checkbox v-model="formData.payType" true-label="1" false-label="0" :border="true" size="medium "
                     style="margin-top:10px">邮局征订
        </el-checkbox>
        <div class="ticker" v-show="formData.payType==0">
          <div class="foundation">
            <h2>开票信息</h2>
          </div>
          <el-row>
            <el-col :span="7">
              <el-form-item label="发票抬头" prop="invoiceTitle">
                <el-input v-model="formData.invoiceTitle" placeholder="请输入发票抬头" clearable
                          prefix-icon='el-icon-postcard'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="税号" prop="taxNo" label-width="40px">
                <el-input v-model="formData.taxNo" placeholder="请输入税号" clearable
                          prefix-icon='el-icon-postcard'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="备注" prop="remarks" label-width="40px">
                <el-input v-model="formData.remarks" placeholder="选填" clearable
                          prefix-icon='el-icon-postcard'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="submit" style="margin-top: 10px">
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import kefu from '@/assets/contact/kefuweixin.jpg'
import imagePreview from '@/components/ImagePreview/index.vue'
import cityList from '@/assets/city.json'
import { listMagazine } from '@/api/magazine/magazine'
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from '@/api/magazine/order'

export default {
  name: 'MagazineIndex',
  components: {
    imagePreview
  },
  computed: {
    totalPrice: function () {
      let totalMoney = this.formData.num * this.currentPrice
      this.formData.totalPrice = totalMoney
      return totalMoney
    }
  },
  data () {
    return {
      kefu,
      currentPrice: 0,
      cityList: cityList.RECORDS,
      magazineList: [],
      formData: {
        id: null,
        mobile: null,
        custumerName: null,
        email: null,
        company: null,
        phone: null,
        magazineId: null,
        num: 1,
        totalPrice: 0,
        payType: 0,
        city: null,
        address: null,
        receiver: null,
        invoiceTitle: null,
        postcode: null,
        taxNo: null,
        remarks: null

      },
      rules: {
        receiver: [{
          required: true,
          message: '请填写收件人信息',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请填写收货地址',
          trigger: 'blur'
        }],
        magazineId: [{
          required: true,
          message: '选择杂志类型',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        custumerName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        email:
          [{
            required: true,
            message: '请输入电子邮箱',
            trigger: 'blur'
          },
            {
              pattern:  /\S+@\S+\.\S+/,
              message: '邮箱格式错误',
              trigger: 'blur'
            }],
        company: [{
          required: true,
          message: '请输入单位或学校全称',
          trigger: 'blur'
        }],
        city: [{
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formData.id != null) {
            updateOrder(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addOrder(this.formData).then(response => {
              this.$modal.msgSuccess('提交订单成功！')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    resetForm () {
      this.$refs.elForm.resetFields()
    },
    handleCurrentChange (val) {
      this.currentPrice = val.price
    },
    getList () {
      let params = { slae: 1 }
      listMagazine(params).then(response => {
        this.magazineList = response.rows
        this.formData.magazineId=this.magazineList[0].id
        this.currentPrice=this.magazineList[0].price
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.magazinedesc .right img {
  width: 150px;
  height: 150px;
}

.magazinedesc {
  display: flex;
  justify-content: space-evenly;
}

.left {
  width: 830px;
}

.left .name {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}

.desc {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #ecf0f9;
  padding: 37px 10px 20px 30px;

  .fL {
    width: 350px;
    height: 24px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #757575
  }
}

.right {
  text-align: center;

  .title {
    font-weight: bold;
    font-size: 1.4em;
    margin-bottom: 10px;
    width: 92%;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
  }

  p {
    margin-top: 3px;
    margin: 0;
    color: #666;
    font-size: 1em;
    line-height: 1.95em;
  }
}

.order {
  margin-left: 200px;
  width: 1200px;

  .foundation {
    border-bottom: #e4e3e3 1px solid;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

table {

  border: 1px solid #aaaaaa;
  padding: 2px;
  caption-side: bottom;
  border-collapse: collapse;
}

.num {
  margin-top: 20px;
  font-size: 18px;
}

.totalprice {
  width: 100px;
  height: 36px;
  color: #fff;
  background-color: #67c23a;
  text-align: center;
  font-size: 24px;
  border-radius: 18px;
}

.info {
  color: blue;
}

.app-container {
  margin-bottom: 100px;
}
</style>
